<template>
  <div class="graphic">
    <div class="graphic-body">
      <swiper :options="courseSwiperOption">
        <swiper-slide v-for="(chunk, key) in naviList" :key="key">
          <div class="graphic-body_flex">
            <div
              v-for="(item, index) in chunk"
              :key="index"
              class="item"
              :class="`col${datas.form.arrange_type}`"
            >
              <el-image :src="item.url" class="image">
                <div slot="error" class="image-error">
                  <img
                    class="image-error__icon"
                    src="@/assets/images/template/h5/placeholder_medium.png"
                  />
                </div>
              </el-image>
              <div class="title">{{ item.title }}</div>
            </div>
          </div>
        </swiper-slide>
      </swiper>
      <div class="swiper-pagination"></div>
    </div>
    <!-- 删除组件 -->
    <slot name="deles" />
  </div>
</template>

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
export default {
  name: 'TopNav',
  components: {
    swiper,
    swiperSlide
  },
  props: {
    datas: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      courseSwiperOption: {
        spaceBetween: 0,
        loop: false,
        loopAdditionalSlides: 0,
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        }
      }
    }
  },
  computed: {
    naviList() {
      const navs = this.datas.form.source_list
      const len = navs.length
      const chunk = this.datas.form.arrange_type
      const navList = []
      for (let i = 0; i < len; i += chunk) {
        navList.push(navs.slice(i, i + chunk))
      }

      return navList
    }
  }
}
</script>

<style scoped lang="scss">
.graphic {
  padding: 14px 10px;
  background-color: #ffffff;
  position: relative;
  &-body {
    position: relative;
    .graphic-body_flex {
      display: flex;
    }
    .item {
      &.col3 {
        flex: 0 0 33.33%;
      }
      &.col4 {
        flex: 0 0 25%;
      }
      &.col5 {
        flex: 0 0 20%;
      }
      .image {
        width: 40px;
        height: 40px;
        display: block;
        margin: 0 auto;
        ::v-deep.image-error {
          width: 100%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 100%;
          height: 100%;
          background-color: #f1f1f1;
          .image-error__icon {
            width: 20px;
            height: 14px;
          }
        }
      }
      .title {
        margin-top: 4px;
        height: 17px;
        font-size: 12px;
        font-weight: 400;
        color: #333333;
        line-height: 17px;
        text-align: center;
        white-space: nowrap;
      }
    }
    ::v-deep.swiper-pagination {
      bottom: -12px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      height: 3px;
      background: #f7f7f7;
      border-radius: 3px;
      .swiper-pagination-bullet {
        width: 20px;
        height: 3px;
        background: transparent;
        border-radius: 3px;
        opacity: 1;
      }
      .swiper-pagination-bullet-active {
        background: #5191ff;
      }
    }
  }
}
</style>
